<template>
    <Page class="basic company">
        <template #header>
            <el-input v-model="queryForm.merchantName" placeholder="请输入店铺名称" />
            <el-input v-model="queryForm.name" placeholder="请输入商品名称" />
            <EdSelect v-model="queryForm.verifyStatus" :selectParams="selectVerifyStatus"></EdSelect>
            <!-- <EdDateTimeRange ref="timeRange" @emit-echo-time-range="emitEchoTimeDate($event, 'pickerTime')"></EdDateTimeRange> -->
            <EdDateTimePickerRange v-model="queryForm.pickerTime"  @emit-echo-time-range="emitEchoTimeDate($event, 'pickerTime')" :pickerParams="pickerRangeParams"></EdDateTimePickerRange>
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查 询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重 置</el-button>
        </template>
        <PageCard title="商品审核列表">
            <template #actions>
                <el-button :disabled="multipleSelectionIds.length==0" class="ed-button ed_black-bottom ed-button36" @click="batchHandle()" v-has="'shopping:commodityVerify:batch'"><svg-icon icon-class="batch-handle-svg"/>批量审核</el-button>
            </template>
            <ApiTable :api="tableApi" ref="table" :params="queryForm" @selectionData="selectionData">
                <el-table-column type="selection" :selectable="selectable" width="55" ></el-table-column>
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <!-- <el-table-column width="80" prop="id" label="序号"></el-table-column> -->
                <el-table-column :show-overflow-tooltip="true" prop="merchantName" label="店铺名称" :formatter="formatter"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="productName" label="商品名称" :formatter="formatter"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="categoryName" label="商品类别" :formatter="formatter">
                    <!-- <template slot-scope="scope">
                        <span>{{returnName(scope.row['categoryId'], selectGoodsType.options, 'code', 'categoryName') || scope.row['categoryId']}}</span>
                    </template> -->
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="" label="商品售价">
                    <template slot-scope="scope">
                        <div v-if="scope.row['money']!=null">{{ scope.row.money }}元</div>
                        <div v-if="scope.row['point']!=null">{{ scope.row.point }}积分</div>
                        <div v-if="scope.row.moneyPoint['money']!=null">{{ scope.row.moneyPoint['money'] }}元+{{ scope.row.moneyPoint['point'] }}积分</div>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="hotStatus" label="设置为热门商品">
                    <template slot-scope="scope">
                        <el-switch
                            :value="scope.row.hotStatus == '1' ? true : false"
                            @change="switchChange(scope.row, scope.row.hotStatus == '1' ? '0' : '1')"
                            active-color="#EED096"
                            inactive-color="#909399">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="verifyStatus" label="审核状态">
                    <template slot-scope="scope">
                        <span>{{returnName(scope.row['verifyStatus'], selectVerifyStatus.options) || scope.row['verifyStatus'] || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column width="250" :show-overflow-tooltip="true" prop="createTime" label="创建时间" :formatter="formatter"></el-table-column>
                <el-table-column width="250" :show-overflow-tooltip="true" prop="" label="操作">
                     <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_black_border" v-if="scope.row.verifyStatus==0" v-has="'shopping:commodityVerify:verify'" @click="verify(scope.row)">商品审核</el-button>
                        <el-button class="ed-table-bottom ed_see_border" v-else v-has="'shopping:commodityVerify:see'" @click="see(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </ApiTable>
        </PageCard>
        <EdDialog :width="'474px'" :title="'批量审核'" ref="batchHandleDialog" class="batchHandleDialog" v-if="batchHandleVisible"  @close-dialog="batchHandleClose" @save-dialog="batchHandleSave('batch_form_ref')">
           <div class="content">
                <div class="header">
                    <i class="el-icon-warning" style="color:#EED096;font-size: 18px;"></i>
                    <span>即将批量审核{{multipleSelectionIds.length}}条数据</span>
                </div>
                <div class="main">
                    <el-form ref="batch_form_ref" :model="batch_form" label-position="left" label-width="auto">
                        <el-form-item label="商品审核：" prop="batch_radio">
                            <el-radio-group v-model="batch_form.batch_radio">
                            <el-radio v-for="item in selectProductVerify.options" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                        </el-radio-group>
                        </el-form-item>
                        <el-form-item v-if="batch_form.batch_radio==2" label="不通过原因：" prop="reason" :rules="$validate.validates({required:true,msg:'不能为空'})">
                            <el-input class="flex-input failReasonStyle" placeholder="请输入不通过原因" v-model="batch_form.reason" maxlength="50"></el-input>
                        </el-form-item>
                    </el-form>

                    <!-- 商品审核：
                    <el-radio-group v-model="batch_form.batch_radio">
                        <el-radio v-for="item in selectProductVerify.options" :key="item.value" :label="item.value">{{item.label}}</el-radio>
                    </el-radio-group>
                    <el-input v-if="batch_form.batch_radio==2" class="flex-input failReasonStyle" placeholder="请输入不通过原因" v-model="batch_form.reason"></el-input> -->
                </div>
           </div>
        </EdDialog>
    </Page>
</template>

<script>
import Page from '../../components/Page.vue'
import PageCard from 'src/views/components/PageCard.vue'
import ApiTable from 'src/components/ApiTable.vue'
import EdSelect from 'src/components/EdSelect.vue'
import EdDateTimeRange from 'src/components/EdDateTimeRange.vue'
import EdDateTimePickerRange from 'src/components/EdDateTimePickerRange.vue'
import EdDialog from 'src/components/EdDialog.vue';
import { defineComponent } from 'vue'
import { verifyList, productBatchVerify, getResourceType, setHot, cancelHot } from "./api";
import { returnName } from "src/utils/common.js";
import { getDictByCode } from "src/api/dictionaries";
export default defineComponent({
    name: 'member',
    components: { Page, PageCard, ApiTable, EdSelect, EdDateTimeRange, EdDialog, EdDateTimePickerRange },
    data() {
        return {
            queryForm: {
                name: '',
                merchantName: '',
                verifyStatus: '',
                pickerTime: '',
                startTime: '',
                endTime: '',
            },
            pickerRangeParams:{
                valueFormat:"yyyy-MM-dd HH:mm"
            },
            selectGoodsType:{
                placeholder:"请选择商品类别",
                options: [
                    // { value: '1', label: '物业费折扣券' },
                    // { value: '2', label: '母婴' },
                ],
                props: { value: 'code', label: 'categoryName' },
            },
            selectVerifyStatus:{
                placeholder:"请选择审核状态",
                options: [
                    { value: '0', label: '待审核' },
                    { value: '1', label: '通过' },
                    { value: '2', label: '不通过' },
                ],
            },
            // 商品审核
            selectProductVerify:{
                options: [
                    { value: '1', label: '通过' },
                    { value: '2', label: '不通过' },
                ]
            },
            // 批量处理
            batchHandleVisible: false,
            batch_form: {
                batch_radio: '1',
                reason: '',
            },
            // 多选
            multipleSelectionIds: [],
            selectionTableData:[],
        }
    },
    activated(){
        // 来源
        // getDictByCode('product_source').then(res=>{
        //     this.selectSource.options = res.data.items;
        // })
        // 商品类别
        getResourceType({pageSize: 999999}).then(res=>{
            this.selectGoodsType.options = res.data;
        })
        this.$nextTick(() => {
            this.$refs.table.load(1);
        })
    },
    methods: {
        tableApi: verifyList,
        search(){
            // delete this.queryForm['pickerTime'];
            this.$refs.table.load(1)
        },
        reset(){
            this.queryForm = {
                name: '',
                merchantName: '',
                verifyStatus: '',
                pickerTime: '',
                startTime: '',
                endTime: '',
            }
            // this.$refs.timeRange.reset();
            this.$nextTick(() => {
                this.$refs.table.load(1, 10);
            })
        },
        add(){
            this.$router.push({
                path: '/shopping/resourcePool-add'
            })
        },
        // 批量审核
        batchHandle(){
            this.batchHandleVisible = true;
        },
        batchHandleClose(){
            this.batch_form ={
                batch_radio: '1',
                reason: '',
            }
            this.batchHandleVisible = false;
        },
        batchHandleSave(formName){
            this.$refs[formName].validate((valid) => {
                if(valid){
                    let params = {
                        productId: this.multipleSelectionIds,
                        status: this.batch_form.batch_radio,
                        reason: this.batch_form.reason,
                    }
                    // console.log('params--->', params)
                    // return
                    productBatchVerify(params).then(response => {
                        if(response.success == true) {
                            this.$message.success({
                                message: '处理成功！',
                                duration: 2000,
                                center:true
                            });
                            this.batch_form ={
                                batch_radio: '1',
                                reason: '',
                            }
                            this.batchHandleVisible = false;
                            this.$refs.table.load()
                        }
                    }).catch(()=>{
                        this.$refs.batchHandleDialog.hideLoading()
                    })
                }else{
                    this.$refs.batchHandleDialog.hideLoading()
                }
            })
        },
        // 设置热门
        switchChange(row, value){
            let params = {
                id: row.id,
                // publishStatus: value,
            }
            let fucApi = value == 1 ? setHot : cancelHot;
            fucApi(params).then(res => {
                if(res.success == true){
                    this.$message.success({
                        message: '操作成功',
                        duration: 2000,
                        center:true
                    })
                    this.$refs.table.load()
                }
            })
        },
        returnName(val, options, value, label){
            return returnName(val, options, value, label)
        },
        emitEchoTimeDate(data){
            // $event 子组件$emit传的参数 
            this.queryForm['startTime'] = data.startTime;
            this.queryForm['endTime'] = data.endTime;
        },
         // 单个审核
        verify(row){
            this.$router.push({
                path: '/shopping/commodityVerify-verify',
                query: { id: row.id },
            })
        },
        // 查看
        see(row){
            this.$router.push({
                path: '/shopping/commodityVerify-detail',
                query: { id: row.id },
            })
        },
        selectable(row, index){
            return row.verifyStatus == 0
        },
        selectionData(value){
            // 选中订单号 数组
            this.multipleSelectionIds = value&&value.map((v, i)=>{
                return v.id
            })
            // 选中数据 数组
            this.selectionTableData = value;
        },
        formatter(row, column, cellValue, index){
            return cellValue || '-'
        }
    }
})
</script>

<style scoped lang="scss">
    :deep .batchHandleDialog{
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        .el-dialog__body{
            padding-left: 75px;
        }
        .header{
            color: #1E1E1E;
            margin-bottom: 30px;
        }
        .main{
            color: #606266;
        }
        .el-radio-group .el-radio.is-checked{
            .el-radio__input{
                .el-radio__inner{
                    border-color: #EED096;
                    background: #EED096;
                }
            }
            .el-radio__label{
                color: #EED096;
            }
        }

        .el-radio-group .el-radio{
            .el-radio__input{
                .el-radio__inner:hover{
                    border-color: #EED096;
                }
            }
        }
        .failReasonStyle{
            margin-top: 10px;
            input{
                width: 80%;
            }
        }
    }
</style>